<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.container,
		.filp,
		.front,
		.back{
			width:  100px;
			height: 300px;
		}
		.container{
			perspective: 1000;
			transform-style: preserve-3d;
		}

		.filp{
			display: inline-block;
			position: relative;
			transition: transform .6s;
			transform-style: preserve-3d;
		}
		.front,
		.back{
			backface-visibility: hidden;
			position: absolute;
			left: 0;
			top: 0;
		}
		.front{
			z-index: 2;
			background-color: red;
		}
		.back{
			transform: rotateY(-180deg);
			background-color: green;
		}
		.test{
			display: none;
		}
		.test:checked+.container .filp{
			transform: rotateY(180deg)
		}
	</style>
</head>
<body>
	<input type="checkbox" id="test" class="test">
	<div class="container">
		<label class="filp" for="test">
			<div class="front">
				正面	
			</div>
			<div class="back">
				背面
			</div>
		</label>
	</div>
</body>
</html>